<template>
  <div class="relative-position">
    <a-loading v-if="!querySet && loading" :visible="loading" height="50vh">
    </a-loading>
    <div v-else>
      <a-table
        :data="querySet"
        :columns="columns"
        :loading="loading"
        :ordering="ordering"
        :page="page"
        :max="max">
        <a-popover-menu slot="action" slot-scope="props" :menu="menu" :instance="props.instance"></a-popover-menu>
      </a-table>
      <!--<a-pagination :page="page" :max="max"></a-pagination>-->
    </div>
    <a-dialog v-if="editorModalId" v-model="editorModalId" title="添加协作者">
      <div>
        <div class="size-14 q-my-md">
          <a-search-user @add="addEditor"></a-search-user>
        </div>
        <!--<div class="text-right">-->
        <!--<q-btn label="添加" color="primary"/>-->
        <!--</div>-->
      </div>
      <q-list no-border separator link class="border-top-1-eee">
        <q-item>
          <q-item-main class="row">
            <a-head :user="activeMap.add_user" :size="32"></a-head>
          </q-item-main>
          <q-item-side class="size-14" right>
            创建者
          </q-item-side>
        </q-item>
        <q-item v-for="editor in activeMap.editors" :key="editor.id">
          <q-item-main class="row">
            <a-head :user="editor" :size="32"></a-head>
          </q-item-main>
          <q-item-side class="row items-center" right>
            <q-btn round dense icon="close" @click="removeEditor(editor)"/>
          </q-item-side>
        </q-item>
      </q-list>
    </a-dialog>
  </div>
</template>

<script>
  import { querySetMixin } from '../../mixins'

  export default {
    name: 'pageAccountMaps',
    mixins: [querySetMixin],
    props: {
      type: {
        type: String,
        required: false
      },
      ordering: {
        type: String,
        required: false,
        default: '-update_date'
      }
    },
    data: function () {
      return {
        editorModalId: false,
        editorOptions: [
          { label: '协作者', value: 'editor' },
          { label: '浏览者', value: 'viewer' }
        ],
        editorSearchKey: '',
        columns: [
          {
            label: '标题',
            field: 'name',
            content (instance) {
              return instance.title || instance.name || '未命名地图'
            },
            link: {
              target: '_blank',
              url: (instance) => {
                const id = instance.id
                return `/map/${id}/`
              }
            }
          },
          {
            label: '创建日期',
            format: 'timesince',
            class: 'gt-md',
            field: 'add_date',
            ordering: true,
            width: '140px'
          },
          {
            label: '发布',
            format: 'boolean',
            class: 'gt-md',
            align: 'center',
            ordering: true,
            field: 'is_public',
            width: '100px'
          }
        ],
        menu: [
          {
            name: '浏览',
            icon: 'open_in_new',
            action: ({ id }) => {
              window.open(`/map/${id}/`)
            }
          },
          {
            name: '编辑',
            icon: 'edit',
            action: ({ id }) => {
              window.open(`/map/edit/${id}/`)
            }
          },
          {
            name: '发布地图',
            visible: (instance) => {
              return !instance.is_public
            },
            action: ({ id }) => {
              this.update({
                api: '/api/map/{id}/',
                id,
                data: {
                  is_public: true
                }
              })
            }
          },
          {
            name: '取消发布',
            visible: (instance) => {
              return instance.is_public
            },
            action: ({ id }) => {
              console.log(this.update, this.nextPage)
              this.update({
                api: '/api/map/{id}/',
                id,
                data: {
                  is_public: false
                }
              })
            }
          },
          {
            name: '删除',
            icon: 'delete',
            separator: true,
            action: ({ id }) => {
              this.deleteMap(id)
            }
          }
        ]
      }
    },
    created () {
    },
    computed: {
      activeMap () {
        return this.getActiveMap()
      },
      queryParams () {
        let query = {}

        if (this.page) {
          query.page = this.page
        }

        if (this.ordering) {
          query.ordering = this.ordering
        }

        return query
      }
    },
    watch: {
      type () {
        this.query()
      }
    },
    methods: {
      query () {
        if (this.type === 'maps') {
          this.getMyMaps()
        } else {
          this.getCoMaps()
        }
      },
      async getMyMaps () {
        this.getQuerySet({
          api: '/api/user/{id}/maps/',
          id: this.auth.id,
          page: this.page,
          limit: this.limit,
          params: this.queryParams
        })
      },
      async getCoMaps () {
        this.getQuerySet({
          api: '/api/user/{id}/co_maps/',
          id: this.auth.id,
          page: this.page,
          limit: this.limit,
          params: this.queryParams
        })
      },
      async deleteMap (id) {
        if (await this.confirm({
          title: '删除地图',
          message: '地图删除后数据将全部丢失无法复原，是否继续？',
          ok: '删除',
          cancel: '取消'
        }) === false) {
          return
        }

        const { status } = await this.deleteRequest({
          api: '/api/map/{id}/',
          id: id
        })

        if (status === 200) {
          this.notify('success', '删除地图成功')
          // this.removeMapList(id)
        } else {
          this.notify('success', '删除地图失败，请刷新页面后重试！')
        }

        this.query()
      },
      async updateMap (id) {
        try {
          await this.$q.dialog({
            title: '升级地图',
            message: '升级地图操作不可逆，是否继续？',
            ok: '升级',
            cancel: '取消'
          })
        } catch (e) {
          return false
        }

        const { status } = await this.getRequest({
          api: '/map/update/?pk={id}',
          id
        })

        if (status === 200) {
          this.notify('success', '升级成功')
          const activeMap = this.getActiveMap(id)
          activeMap.version = '3.0.1'
        } else {
          this.notify('error', '升级失败')
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
